`@replay`, backed by compiled WebAssembly

using WasmTarget
using WasmTarget: Bridge

"WasmTarget $(pkgversion(WasmTarget))"

"WasmTarget 0.5.3"

# The same series shape as the ECharts/Plotly demos, so the two backends can be compared directly.
xs = collect(1:60)
INFL = 2.0 .+ 0.45 .* sin.(xs ./ 3.2) .+ 0.25 .* cos.(xs ./ 1.7) .+
       4.5 .* exp.(-((xs .- 31.0) .^ 2) ./ (2 * 1.1^2))

"$(length(xs)) months · peak $(round(maximum(INFL); digits = 2))%"

"60 months · peak 6.59%"

function movavg_c(y::Vector{Float64}, w::Int64)
    n = length(y)
    out = zeros(Float64, n)
    h = (w - 1) ÷ 2
    for i in 1:n
        lo = max(1, i - h)
        hi = min(n, i + h)
        s = 0.0
        for j in lo:hi
            s += y[j]
        end
        out[i] = s / (hi - lo + 1)
    end
    return out
end

# What `@replay w movavg(INFL, w)` would hand the compiler: a one-argument function of the control.
replay_w(w::Int64) = movavg_c(INFL, w)

# Read-back accessors the page calls on the returned vector. `Int32` rather than `Int64` because an
# `Int64` parameter arrives in JS as a `BigInt`, and the render loop would then allocate one per element.
vlen(v::Vector{Float64}) = length(v)
vget32(v::Vector{Float64}, i::Int32) = v[i]

"kernel defined · movavg_c(INFL, 5)[1:3] = $(round.(replay_w(5)[1:3]; digits = 4))"

"kernel defined · movavg_c(INFL, 5)[1:3] = [2.3401, 2.3178, 2.2952]"

WDOMAIN = 1:1:15          # the slider's domain, as the table backend would sweep it

wasm_bytes, compile_seconds = let
    _, raccs = Bridge.descriptor(Vector{Float64})
    funcs = Any[(replay_w, (Int64,), "entry")]
    seen = Set{String}(["entry"])
    for (f, at, nm) in vcat(raccs, Any[(vlen, (Vector{Float64},), "vlen"),
                                       (vget32, (Vector{Float64}, Int32), "vget32")])
        nm in seen && continue
        push!(seen, nm)
        push!(funcs, (f, at, nm))
    end
    t0 = time()
    b = WasmTarget.compile_multi(funcs; validate = true, optimize = true)
    (b, time() - t0)
end

table_bytes = length(INFL) * length(WDOMAIN) * 8

# The wasm win scales with `domain size`, not with the kernel: the module carries the series ONCE,
# the table carries it once per control position. A 60-point series over 15 positions is the modest
# end of that — the demo notebooks' 2 000-point series over 100 positions is where it bites.
slate_table([
    (backend = "wasm module", bytes = length(wasm_bytes),
     note = "the series once, plus code · compiled in $(round(compile_seconds; digits = 2))s"),
    (backend = "precomputed table", bytes = table_bytes,
     note = "$(length(INFL)) points × $(length(WDOMAIN)) positions × 8 B"),
    (backend = "ratio", bytes = 0,
     note = "$(round(table_bytes / length(wasm_bytes); digits = 1))× smaller, at this size"),
])

┌ Warning: wasm-tools not found — skipping the wasm validation gate (install: `cargo install wasm-tools`)
└ @ WasmTarget ~/.julia/packages/WasmTarget/D6fgk/src/WasmTarget.jl:384

mod_asset = save_asset("movavg_wasm", wasm_bytes)

PROBES = collect(WDOMAIN)
reference = Dict(string(w) => replay_w(w) for w in PROBES)
ref_asset = save_asset("movavg_reference.json", reference)

"module $(length(wasm_bytes)) B · reference for $(length(PROBES)) probe values"

"module 2122 B · reference for 15 probe values"

# Deliberately NOT tagged `controls=w`. A `controls=` tag would re-run this cell in Julia on every
# slider move, which is the live kernel path — exactly what we are trying to do without. The smoothed
# series is drawn once at w=7 and thereafter rewritten in the browser by the compiled module.
echart(series(:line, xs, INFL; name = "monthly", lineStyle = (width = 1, opacity = 0.45), symbol = "none"),
       series(:line, xs, replay_w(7); name = "smoothed (wasm)", lineStyle = (width = 3,), symbol = "none");
       title = "Centred moving average · smoothed series recomputed in the browser",
       height = 420,
       legend = true,
       xAxis = (name = "month",),
       yAxis = (name = "inflation (%)", min = 0, max = 7),
       dataZoom = [(type = :inside,)])

WebPage(
    html = """<div id="wr-status" style="font:13px/1.6 ui-monospace,monospace;color:#8fd6ff;padding:6px 10px">loading…</div>""",
    js = """
    // `Slate.asset` hands back a raw ArrayBuffer for a BINARY asset (kind:"binary", no dtype), and a
    // {data, shape, order} wrapper for a PACKED numeric one. A wasm module is the former; accept both
    // rather than depend on which, since that is a property of how the asset was saved.
    function toBuffer(A) {
      if (A instanceof ArrayBuffer) return A;
      if (A && A.data && A.data.buffer) {
        return A.data.buffer.slice(A.data.byteOffset, A.data.byteOffset + A.data.byteLength);
      }
      return A;
    }

    // The chart instance for the figure above. Slate keeps a registry keyed by cell id; fall back to
    // ECharts' own `getInstanceByDom`, which works wherever echarts is loaded — including a static
    // export, whose inlined chart runtime need not expose the same globals.
    function findChart() {
      var c = window.charts && window.charts["fig_echart"];
      if (c && c[0]) return c[0];
      var divs = document.querySelectorAll('div[_echarts_instance_]');
      for (var i = 0; i < divs.length; i++) {
        var inst = window.echarts && window.echarts.getInstanceByDom(divs[i]);
        if (inst) return inst;
      }
      return null;
    }
    // Charts render asynchronously, and this cell's script may run first.
    function whenChart(cb, tries) {
      var inst = findChart();
      if (inst) return cb(inst);
      if ((tries || 0) > 60) return cb(null);
      setTimeout(function () { whenChart(cb, (tries || 0) + 1); }, 50);
    }

    Promise.all([Slate.asset("$(mod_asset)"), Slate.asset("$(ref_asset)")]).then(function (both) {
      return WebAssembly.instantiate(toBuffer(both[0])).then(function (res) {
        return { ex: res.instance.exports, ref: both[1] };
      });
    }).then(function (ctx) {
      var ex = ctx.ex, REF = ctx.ref;
      var status = document.getElementById("wr-status");

      // The render path: opaque GC ref in, Float64Array out. No strings, no BigInt per element.
      function series(w) {
        var r = ex.entry(BigInt(w));
        var n = Number(ex.vlen(r));
        var out = new Float64Array(n);
        for (var i = 1; i <= n; i++) out[i - 1] = ex.vget32(r, i);
        return out;
      }
      window.__wrSeries = series;          // so eval_js can poke it independently of the UI

      // Verify against Julia before touching the chart. Exact equality: wasm f64 and a JS number are
      // both IEEE 754 doubles, so there is no tolerance to pick and none to hide behind.
      var checked = 0, bad = 0, firstBad = null;
      Object.keys(REF).forEach(function (k) {
        var want = REF[k], got = series(+k);
        checked++;
        if (got.length !== want.length) {
          bad++;
          if (!firstBad) firstBad = "w=" + k + " length " + got.length + " vs " + want.length;
          return;
        }
        for (var i = 0; i < want.length; i++) {
          if (got[i] !== want[i]) {
            bad++;
            if (!firstBad) firstBad = "w=" + k + " i=" + i + " julia=" + want[i] + " wasm=" + got[i];
            return;
          }
        }
      });

      var t0 = performance.now();
      for (var q = 0; q < 50; q++) series(7);
      var computeMs = (performance.now() - t0) / 50;

      function report(extra) {
        status.textContent = (bad === 0
          ? "verified " + checked + "/" + checked + " probes exact"
          : "DIVERGED on " + bad + "/" + checked + " — " + firstBad)
          + "  ·  " + computeMs.toFixed(3) + " ms compute+read" + (extra || "");
        status.style.color = bad === 0 ? "#8fd6ff" : "#ff8f8f";
      }
      report("");

      whenChart(function (inst) {
        if (!inst) { report("  ·  no chart instance found"); return; }

        // The DSL zips: a line series is [[x,y],…]. So rewrite component 1 of the entries ALREADY
        // DRAWN and keep their x coordinates — the same thing core.js `_replayEntries` does, so the
        // zip layout stays expressed in Julia and is not restated here.
        var base = (inst.getOption().series[1].data || []).map(function (p) { return p.slice(); });

        function apply(y) {
          var next = new Array(base.length);
          for (var i = 0; i < base.length; i++) {
            var q2 = base[i].slice();
            q2[1] = y[i];
            next[i] = q2;
          }
          // Merge by series INDEX: naming only the changed series leaves the reader's zoom, roam and
          // legend state untouched through every step of a drag. A full replace would not.
          inst.setOption({ series: [{}, { data: next }] });
        }

        var input = Slate.replay.control("w");
        if (!input) { report("  ·  no control found for `w`"); return; }
        input.disabled = false;      // an export renders controls disabled until data rides along

        var frames = 0, total = 0;
        function run() {
          var t = performance.now();
          apply(series(+input.value));
          total += performance.now() - t; frames++;
          if (frames % 10 === 0) report("  ·  " + (total / frames).toFixed(2) + " ms/redraw over " + frames);
        }
        input.addEventListener("input", run);
        input.addEventListener("change", run);
        window.__wrApply = run;
        run();
      });
    }).catch(function (e) {
      var s = document.getElementById("wr-status");
      s.style.color = "#ff8f8f";
      s.textContent = "failed: " + (e && e.message || e);
    });
    """)